﻿
/* resetting */
.reset();

/* font setting */
body, textarea, select, option, input 
{
	font-family: @fontface;
	font-size: 100%; /* assuming default browser to medium 16px */
	color: @color;
}

body {
	overflow-x: hidden;
}
body.rtl, .rtl textarea,.rtl select, .rtl option,.rtl input, .ar {
	font-family: @arfontface;
}
body.rtl div.parentpage, .ar {
	direction:rtl;
}

/* layout */
div.parentpage {
	width: @siteWidth; 
	margin: 0 auto;
	padding: 10px 0;
	position: relative;
}
div.poppage {
	margin: 0 auto;
	position: relative;
	padding: 10px;
}	
div.wrapper {
	.columns(@wrapper); /* TODO: make it relative instead of exact */
	padding-left: (@gridColumnWidth  + @gridGutterWidth) * @leftheader;
}

header {
	.columns(@leftheader);
	float: left;
}

/* aside is optional element */
aside {
	position: absolute;
	right: 0;
	top: 0;
	.columns(@gridColumns - @wrapper - @leftheader);
	padding: 10px 0;
}

.l {
	float: left;
}
.r {
	float: right;
}

.cf {
	.clearfix();
}
.clear{
	clear: both;
}
.txtr {
	text-align: right;
}
.txtc {
	text-align: center;
}
.breath, ul.breath>li {
	padding: 10px 0;
}
.spaced, ul.spaced>li  {
	margin-bottom: 20px;
}

.padtop {
	padding-top: @extraSpace; /* to be used only in extreme cases */
}
.margintop {
	margin-top: @extraSpace;  /* to be used only in extreme cases */
}

/* HTML tags redefined */
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%; /*resetting size*/
}
a, .a { /* mimic a href */
	color: @linkcolor;
	text-decoration: none;
	cursor: pointer;
}

a[rel="track"]:visited {
	color:@visitedlinkcolor;
}
a:hover, a[rel="track"]:hover {
	color: @altlinkcolor;
}
section {
	margin-bottom: 20px;
}


h1 a:visited {
	/* only titles of items are tracked for visiting, other a hrefs are not tracked */
	color:@visitedlinkcolor;
}

h1 {
	font-size: 3em;
}
h2 {
	font-size: 2.4em;
}
h3 {
	font-size: 2em;
}
h4 {
	font-size: 1.7em;
}
h5 {
	font-size: 1.5em;
}
h6 {
	font-size: 1.1em;
}
section {
	font-size: 90%;
}

p {
	margin-bottom: 10px;
}
del {
	color: @textlight;
	text-decoration: line-through;
}
summary {
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none
}
summary:before {
  
  content: "+"; 
 
  font-size: 1.2em; 
  font-weight: bold; 
  width: 20px;
  padding: 0; 
  display: inline-block;
  
}
details[open] summary:before {
  content: "-";
}
details[open] summary {
	margin-bottom: 10px;
}


p.normal, .normal p, .normal {
	font-size: 100%;
}
ul.normal li, .normal ul li{
	margin-left: 15px;
	list-style-type: disc;
}
.ar ul.normal li, .ar .normal ul li {
	margin-left: 0;
	margin-right: 15px;
}
ol.normal {
	padding-left: 25px;
}
ol.normal li {
	list-style-type: decimal;
	list-style-position: outside;
}
.ar ol.normal {
	padding-left: 0;
	padding-right: 25px;
}
sup {
	font-size: 70%;
	vertical-align: 4px;
}
blockquote {
	margin-bottom: 10px;
	border-left: 3px solid @greynormal;
	padding: 2px 0 2px 10px;
	position: relative;
	&:before {
		content: "\201F";
		font-family:"Time New Roman";
		left: -25px;
		position: absolute;
		top: 0;
		font-size: 250%;
		color: @greynormal;
	}
	cite {
		color: @textlight;
		&:before {
			content: "\2014";
		}
	}

	p {
		margin: 0;
	}
}

/**********************Exact sections************************/
/* header and logo */
h1.logo {
	display: block;
	.columns(@logocolumns);
	a {
		text-indent: -1000px;
		display: block;
		.columns(@logocolumns);
	
		overflow:hidden;
		background: transparent url("@{logoimage}") no-repeat left top;
	}
}


/**** top area */

/* navigation */
nav {
	font-size: 110%;
}

nav ul li a {
	padding: @extraSpace/2;
	background-color: @grey;
	margin-bottom: 1px;
	display: block;
}
nav ul li a:hover {
	background-color: @greynormal;
}
[role="toolbar"] {
	display: block;
}
[role="toolbar"] li {
	display: inline-block;
	margin-right: 2px;
	font-size: 80%;
}
/* advanced search box */
[role="search"] {
	
}

/* footer */
footer {
	border-top: 2px solid @grey;
	margin-top: 40px;
	padding-top: 10px;

}
footer ul li {
	display: inline-block;
}

/* lightboxes */
.dialog, .dialogcontent {
	.columns(6);
	height: 300px;
	background-color: @inversecolor;
	display: none;
	position: fixed;
    top: 10%;
	padding: 5px;
	z-index: 99999;
	.box-shadow(rgba(0,0,0,0.9) 0 0 5px);
	.border-radius(@radius);
	left: 50%;
}
.widewindow {
	.columns(11);
}
.tallwindow {
	height: 80%;
}
.tightwindow {
	.columns(3);
}
.shortwindow {
	height: 300px; 
}
.autowindow { /* use this with ajaxed content only */
	min-height: 80px;
	height: auto;
}
.jqmOverlay { background-color: @color; }
.jqmClose {
	position: absolute;
	top: 5px;
	right: 5px;
	display: block;
	overflow:hidden;
	width: 30px;
	height: 30px;
	background: transparent url(../images/iclose.png) no-repeat center center;
	text-indent: -1000px;
}
#jqmContent {
	 width:100%; height:90%; /* code changes this */
	 display: block; clear:both; margin:auto; overflow-y: auto;
}
.shortwindow #jqmContent { 
	height: 90%;
}
.dialog div.loading {
	padding: 10px 0 10px 35px;
	font-size: 18px;
	position: absolute;
	background-color: @inversecolor;
	background-position: 5px center;
	background-repeat: no-repeat;
}


/******** homepage styles */

[role="banner"] {
}

/********************Repetitive design elements ****************/

/* styles (tips, icons, badges, boxes...) */

/********* font sizes */
.normal {	font-size: 100%;}
.large {	font-size: 130%;}
.larger {	font-size: 180%;}
.small {	font-size: 12px;}
.smaller {	font-size: 11px;}
/******** font styles */
.red {
	color: @red;
}
.light {
	color: @textlight;
}
.lighter {
	color: @textlighter;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
.labeltext {
	
	padding: 1px 3px 2px;
	.border-radius(@radius);
}
.yellowtext {
	background-color: @yellow;
	color: @textdark;
	.labeltext;
}
.redtext {
	background-color: @red;
	color: #fff;
	.labeltext;
}
.greentext {
	background-color: @green;
	color: @textdark;
	.labeltext;
}
.greytext {
	background-color: @grey;
	.labeltext;
}
.greydarktext {
	background-color: @greydark;
	color: #fff;
	.labeltext;
}
.greynormaltext {
	background-color: @greynormal;
	.labeltext;
}
.box {
	padding: 5px;
	.border-radius(@radius);
}
.yellowbox {
	background-color: @yellow;
	color: @textdark;
	.box;
}

.redbox {
	background-color: @red;
	color: #fff;
	.box;
}
.whitebox {
	border: 3px solid @grey;
	.box;
}
.greenbox {
	background-color: @green;
	color: @textdark;
	.box;
}
.greybox {
	background-color:@grey;
	.box;
}
.whitedarkbox {
	border: 3px solid @greydark;
	.box;
}
.greydarkbox {
	background-color:@greydark;
	color:#fff;
	.box;
	
}
.greynormalbox {
	background-color:@greynormal;
	.box;
}
.whitenormalbox {
	border: 3px solid @greynormal;
	.box;
}
/* speech balloons and tips */
.basicballoon {
	position: relative;
	
	&:after {
		content:"";
		position:absolute;
		display:block; 
		height: 0;
		width: 0;
	}
}
.balloon {
	.basicballoon;
	
	@border: 5px;
	&.below { margin-bottom: @border * 2; }
	&.above { margin-top: @border * 2 }
	&.left { margin-left: @border * 2; }
	&.right { margin-right: @border * 2; }

	&.yellowbox:after {
		border-color: @yellow;
	}
	&.redbox:after {
		border-color: @red;
	}
	&.greenbox:after {
		border-color: @green;
	}

	&.greybox:after {
		border-color: @grey;	
	}
	&.whitebox:after {
		border-color: @grey;
	}
	&.greydarkbox:after {
		border-color: @greydark;
	}
	&.whitedarkbox:after {
		border-color: @greydark;
	}
	&.below:after {#arrow > .below(@border); }
	&.above:after { #arrow > .above(@border); }
	&.left:after { #arrow > .left(@border); }
	&.right:after { #arrow > .right(@border); }

	&.whitebox,
	&.whitedarkbox {
		&.below:after {#arrow > .below(@border+3); }
		&.above:after { #arrow > .above(@border+3); }
		&.left:after { #arrow > .left(@border+3); }
		&.right:after { #arrow > .right(@border+3); }
	}
}

/* for textual icons */

a[rel="external"] {

}
a[rel="pop"]:after {
	background: transparent url(../images/ipopup.png) no-repeat center center;
	width: 20px;
	height: 14px;
	content: "";
	display: inline-block;
}
a[rel="download"]:after {
	background: transparent url(../images/idownload.png) no-repeat center center;
	width: 14px;
	height: 10px;
	content: "";
	display: inline-block;
}

/* for all none textual icons */
.icon {
	display: inline-block;
	width: 25px;
	height: 25px;
	overflow: hidden;
	text-indent: -1000px;
	padding: 0!important;
	margin: 0!important;
	vertical-align: -9px;
	}
.icon span {
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
	width: 25px;
	height: 25px;
	
}
.sicon {
	height: 20px;
	span {
		height: 20px;
	}
	vertical-align: -6px;
}
/* specific icons */
.igrid span {	background-image: url(../images/igrid.png);}
.ilist span {	background-image: url(../images/ilist.png);}
.imap span {	background-image: url(../images/imap.png);}
.isearch span {	background-image: url(../images/isearch.png);}
.iremove {width: 24px; height: 24px;}
.iex span {background-image: url(../images/iex.png); }
.iplus span {background-image: url(../images/iplus.png); }
.ifave span {background-image: url(../images/ifave.png); }
.ifacebook span{background-image:url(../images/ifacebook.png);}
.itwitter span{background-image:url(../images/itwitter.png);}

/********* star rates */
.rate {
	padding: 4px 0;
}
.rate span {
	background: transparent url(../images/istarfull.png) no-repeat right center; /*emtpy stars */
	width: 55px;
	height: 11px;
	overflow: hidden;
	text-indent: -5000px;
	display: inline-block;
}
.rate span.r5,
.rate span.r15,
.rate span.r25,
.rate span.r35,
.rate span.r45
{
	background-image: url(../images/istarhalf.png);
}
.rate span.r5,
.rate span.r10  {
	background-position: -44px center;
}
.rate span.r15,
.rate span.r20 {
	background-position: -33px center;
}
.rate span.r25,
.rate span.r30 {
	background-position: -22px center;
}
.rate span.r35,
.rate span.r40 {
	background-position: -11px center;
}
.rate span.r45,
.rate span.r50 {
	background-position: left center;
}

/********* pointers */

.pd, .pu, .pr, .pl, .pdul, .pdur, .pddl, .pddr {
	
	border-color: @color;
	&:before {
		content:"";
		display:inline-block; 
		height: 0;
		width: 0;
		margin-bottom: 2px;
	}
}
.pd:before		 { #pointer > .down(); }
.pd.small:before { #pointer > .down(3px); }
.pu:before		 { #pointer > .up(); }
.pu.small:before { #pointer > .up(3px); }
.pl:before		 { #pointer > .left(); margin-bottom: 1px;}
.pl.small:before { #pointer > .left(3px); }
.pr:before		 { #pointer > .right(); }
.pr.small:before { #pointer > .right(3px); }
.pdul:before		 { #pointer > .diagonalupleft(); }
.pdur:before		 { #pointer > .diagonalupright(); }
.pddl:before		 { #pointer > .diagonaldownleft(); }
.pddr:before		 { #pointer > .diagonaldownright(); }


/*********** borders */
.bthin {
	border-bottom: 1px solid @greydark;
	padding-bottom: 10px;
}
.bthick {
	border-bottom: 2px solid @greydark;
	padding-bottom: 10px;
}

/**** iconated */

.hmark:before {
	content: " ? ";
	font-weight: bold;
	color: #fff;
	background-color: #000;
	width: 20px;
	text-align: center;
	display: inline-block;
	margin-right: 2px;
	.border-radius(@radius);
}
.exmark:before {
	content: " ! ";
	font-weight: bold;
	color: #fff;
	background-color: #000;
	width: 20px;
	text-align: center;
	display: inline-block;
	margin-right: 2px;
	.border-radius(@radius);
}
/***** tabs */

.tabs 
{
	position: relative;
	border-bottom: 3px solid @greynormal;
	padding-top: 5px;
	margin-bottom: 20px;
	height: 30px;
	clear: both;
	padding-left: 10px;
}
.tabs:after,
.tabs:before {
	content: "";
	display: table;
}
.tabs:after {
	clear: both;
}

.tabs li {
	display: inline-block;
	float: left;
	background-color: @grey;
	border: solid 1px @greynormal;
	border-bottom: 0;
	border-radius: 2px 2px 0 0;
	-webkit-border-radius: 2px 2px 0 0;
	-moz-border-radius: 2px 2px 0 0;
	padding: 5px 8px 4px;
	margin-right: 0;
	cursor: pointer;
}
.tabs li.selected {
	background-color: @inversecolor;
	padding-top: 10px;
	margin-top: -3px;	
	
}
.tabs li.selected a {
	color: @color;
}
.tabs li:hover {
	background-position: -1px;
}

/********* buttons */
.btn,
.btnrev {
	color: @altlinkcolor;
	padding: 5px 10px;
	position: relative;
	display: inline-block;
	text-shadow: 0 1px 0 #fff;
	 
	.transition(border-color .218s);
	
	.gradient(#fcf7ed,#eee9de);
	border: solid 1px #e0ded6;
	.border-radius();
	margin-right: 5px;
	cursor: pointer;
}
.btninplace {
	padding: 3px;
	.border-radius(1px);
	
}
.btnrev {
	color: #fff;
	text-shadow: 0 -1px 0 #5082c2;
	.gradient(#88b6f4,#6e9ede);
	border: solid 1px #70a0e0;
}

.btn:hover {
	border-color: #999;
	.box-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
	
}
.btnrev:hover {
	border-color: #000;
	.box-shadow(0 2px 0 rgba(0, 0, 0, 0.2));
	color: #fff;
}
.btn:active,
.btnrev:active {
	color: #000;
	border-color: #4571a7;
}

.btnleft {
	#border-radius > .bottomright(0);
	#border-radius > .topright(0);
    margin: 0;
}
.btnmiddle {
    .border-radius(0);
    border-left: solid 1px #f3f3f3;
    margin: 0;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
.btnmiddle:hover,
.btnright:hover { border-left: solid 1px #999 }
.btnright {
    #border-radius > .bottomleft(0);
	#border-radius > .topleft(0);
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
.pressed {
	color: #333;
	border-color: #a5a39b;
	background: #9d9a92;
	.gradient(#9d9a92,#bdb8a8);
	
}
.btndisabled,
.btnrevdisabled {
	color: #666;
	padding: 5px 10px;
	position: relative;
	display: inline-block;
	background: #f5f3e9;
	border: solid 1px #e0ded6;
	.border-radius();
	margin-right: 5px;
	cursor: default;
}
.btnrevdisabled {
	
	background: #c7dfff;
	border: solid 1px #aac7ed;
}
a.btndisabled:hover,
a.btnrevdisabled:hover {
	color: #666;
}
/* grid layout */

/***** column based grids */
.incols {
	margin-right:  -1 *  @gridGutterWidth;
	.clearfix();
}
.incols .col, .incols>li {
	float: left;
	display: inline-block;
	margin-right:@gridGutterWidth;
}

/* 12 gird base */
/***** column widths coupled with form fields input widths */
/* w = form fields, h = form field heights, u = ullist, c = column, p = with pad */
.w1 { .columns(1,3); }  /* 3 px = 1px padding + 2px border for input fields */
.w2 { .columns(2,3); }
.w3 { .columns(3,3); }
.w4 { .columns(4,3); }
.w5 { .columns(5,3); }
.w6 { .columns(6,3); }
.w7 { .columns(7,3); }
.w8 { .columns(8,3); }
.w9 { .columns(9,3); }
.w10 { .columns(10,3); }
.w11 { .columns(11,3); }
.w12 { .columns(12,3); }
.w12 { .columns(12,3); }
/* following are regulars for more than 12 column base */
.w13 { .columns(13,3); }
.w14 { .columns(14,3); }
.w15 { .columns(15,3); }
.w16 { .columns(16,3); }
.w17 { .columns(17,3); }
.w18 { .columns(18,3); }
.w19 { .columns(19,3); }
.w20 { .columns(20,3); }
.w21 { .columns(21,3); }
.w22 { .columns(22,3); }
.w24 { .columns(23,3); }
.w25 { .columns(24,3); }
/* full width input fields */
.w100 { width:100%;}

.c1, .u1>li { .columns(1); }
.c2, .u2>li { .columns(2); }
.c3, .u3>li { .columns(3); }
.c4, .u4>li { .columns(4); }
.c5, .u5>li { .columns(5); }
.c6, .u6>li { .columns(6); }
.c7, .u7>li { .columns(7); }
.c8, .u8>li { .columns(8); }
.c9, .u9>li { .columns(9); }
.c10, .u10>li { .columns(10); }
.c11, .u11>li { .columns(11); }
.c12, .u12>li { .columns(12); }
/* more than 12 columns */
.c13, .u13>li { .columns(13); }
.c14, .u14>li { .columns(14); }
.c15, .u15>li { .columns(15); }
.c16, .u16>li { .columns(16); }
.c17, .u17>li { .columns(17); }
.c18, .u18>li { .columns(18); }
.c19, .u19>li { .columns(19); }
.c20, .u20>li { .columns(20); }
.c21, .u21>li { .columns(21); }
.c22, .u22>li { .columns(22); }
.c23, .u23>li { .columns(23); }
.c24, .u24>li { .columns(24); }

/* grids with paddinggs */
.p1, .up1>li { .columns(1,@extraSpace*2);  padding:@extraSpace; }
.p2, .up2>li { .columns(2,@extraSpace*2);  padding:@extraSpace; }
.p3, .up3>li { .columns(3,@extraSpace*2);  padding:@extraSpace; }
.p4, .up4>li { .columns(4,@extraSpace*2);  padding:@extraSpace; }
.p5, .up5>li { .columns(5,@extraSpace*2);  padding:@extraSpace; }
.p6, .up6>li { .columns(6,@extraSpace*2);  padding:@extraSpace; }
.p7, .up7>li { .columns(7,@extraSpace*2);  padding:@extraSpace; }
.p8, .up8>li { .columns(8,@extraSpace*2);  padding:@extraSpace; }
.p9, .up9>li { .columns(9,@extraSpace*2);  padding:@extraSpace; }
.p10, .up10>li { .columns(10,@extraSpace*2);  padding:@extraSpace; }
.p11, .up11>li { .columns(11,@extraSpace*2);  padding:@extraSpace; }
.p12, .up12>li { .columns(12,@extraSpace*2);  padding:@extraSpace; }
/* more than 12 columns */
.p13, .up13>li { .columns(13,@extraSpace*2);  padding:@extraSpace; }
.p14, .up14>li { .columns(14,@extraSpace*2);  padding:@extraSpace; }
.p15, .up15>li { .columns(15,@extraSpace*2);  padding:@extraSpace; }
.p16, .up16>li { .columns(16,@extraSpace*2);  padding:@extraSpace; }
.p17, .up17>li { .columns(17,@extraSpace*2);  padding:@extraSpace; }
.p18, .up18>li { .columns(18,@extraSpace*2);  padding:@extraSpace; }
.p19, .up19>li { .columns(19,@extraSpace*2);  padding:@extraSpace; }
.p20, .up20>li { .columns(20,@extraSpace*2);  padding:@extraSpace; }
.p21, .up21>li { .columns(21,@extraSpace*2);  padding:@extraSpace; }
.p22, .up22>li { .columns(22,@extraSpace*2);  padding:@extraSpace; }
.p23, .up23>li { .columns(23,@extraSpace*2);  padding:@extraSpace; }
.p24, .up24>li { .columns(24,@extraSpace*2);  padding:@extraSpace; }

/* grids with whitebox borders */
.b1, .ub1>li { .columns(1,@boxborder*2 + @boxpadding*2);  }
.b2, .ub2>li { .columns(2,@boxborder*2 + @boxpadding*2);  }
.b3, .ub3>li { .columns(3,@boxborder*2 + @boxpadding*2);  }
.b4, .ub4>li { .columns(4,@boxborder*2 + @boxpadding*2);  }
.b5, .ub5>li { .columns(5,@boxborder*2 + @boxpadding*2);  }
.b6, .ub6>li { .columns(6,@boxborder*2 + @boxpadding*2);  }
.b7, .ub7>li { .columns(7,@boxborder*2 + @boxpadding*2);  }
.b8, .ub8>li { .columns(8,@boxborder*2 + @boxpadding*2);  }
.b9, .ub9>li { .columns(9,@boxborder*2 + @boxpadding*2);  }
.b10, .ub10>li { .columns(10,@boxborder*2 + @boxpadding*2);  }
.b11, .ub11>li { .columns(11,@boxborder*2 + @boxpadding*2);  }
.b12, .ub12>li { .columns(12,@boxborder*2 + @boxpadding*2);  }

/* inputs with paddings */
.hm {
	height: 100px;
}
.hl {
	height: 200px;
}



/* sections, articles, details, ... HTML5 **/


/******** inpage pager ***********/
.paged {
	margin-bottom: 20px;
}
.pagehandle {
	text-align: center;
	background-position: center bottom;
	padding-bottom: 15px;
}
/* listings */
/**** comma seperated items */
ul.commasep li {
	display: inline;
}
ul.commasep li:before {
	content: ", ";
}
ul.commasep li:first-child:before {
	content: "";
}
/***** active list used for displaying map locations...etc */
ul.activelist>li {
	display:block;
	margin-right: 2px;
	margin-bottom: 1px;
}
ul.activelist>li a {
	display:block;
	background-color: @grey;
	padding: 2px 5px;
	color: @color;
}
ul.activelist li a:hover {
	background-color: @linkcolor;
	color:@inversecolor;
}
/***** content list like the one used in reviews */
ul.contentlist>li {
	border-bottom: 1px solid @grey;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
ul.contentlist>li h3 {
	font-size: 1.3em;
	
}
ul.contentlist>li h4 {
	font-size: 1.1em;
}
/**** nested lists for multiple uls */
ul.nestedlist>li>ul{
	padding-left: 15px;
}
/****rows seperated with borders */
/* get rid of gutter */

ul.rowlist>li {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px dotted @grey;
	padding-right:@gridGutterWidth;
	margin-right: 0;
}

/* action list of links to action on current item */
ul.actionlist {
	margin-bottom: 10px;
}
ul.actionlist>li {
	
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid @grey;
}
/* wizard list, could be ol or ul */
.wizardlist {
	margin-bottom: 20px;
}
.wizardlist>li {
	display: inline-block;
	padding: 5px 10px;
	font-size: 1.4em;
	border-bottom: 3px solid @grey;
	color: @textlighter;
}
.wizardlist>li a {
	
}
.wizardlist>li.selected {
	border-color: @red;
	color: @color;
}

/****** filter list or expand list */
.filterlist {
	position: relative;
	.h {
		.a;
		.pd;
		&:before { #pointer > .diagonaldownright(6px); }
	}
	&.toggle {
		.h {
			&:before { #pointer > .down(4px); }
		}
	}
	.guts {
		
		position: absolute;
		background-color: @inversecolor;
		left: 0;	
		z-index: 1000;
		border:1px solid @grey;
		.box-shadow(rgba(0,0,0,0.3) 0 0 9px);
	}
	
}
.filterlist .guts li {
	/* default width can be overwritten with the right up1,2,3... */
	width: (@gridColumnWidth * 2) + @gridGutterWidth;
	padding: @extraSpace;
	&.selected a {
		font-weight: bold;
		color:@color;
	}
}
/**** simplest form of expand list ****/
.expandlist {
	.h {
		.a;
		.pd;
		&:before { #pointer > .diagonaldownright(); }
	}
	&.toggle {
		.h {
			&:before { #pointer > .down(); }
		}
	}
}

/***** table list is sed for displaying custom fields values */
.tablelist>li {
	margin-bottom: 20px;
	padding-left: (@gridColumnWidth  + @gridGutterWidth) * 2;
}
.tablelist>li>h6 {
	float: left;
	.columns(2);
	margin-left: (@gridColumnWidth + @gridGutterWidth) * -2;

}

/* form fields */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type*="date"],
input[type="password"],
textarea,
.mimictextinput
{
	/* used to mimic the text input for regular text */
	border:1px solid #a6a6a6;
	border-color: #a6a6a6 #dbdbdb #dbdbdb #a6a6a6;
	padding: 3px 0 3px 1px;	
}
input[type="file"] {
	border:1px solid #a6a6a6;
	border-color: #a6a6a6 #dbdbdb #dbdbdb #a6a6a6;
	background-color: #fff;
	padding: 2px;
}
.mimictext {
	/* used to mimic the height of a text input for regular text */
	padding: 7px 0 7px 1px;
}
.mimictextinput {
	overflow: auto;
}
input.rtl, .mimictext.rtl, textarea.rtl, .mimictextinput.rtl
{
	direction: rtl;
}
input.ltr, .mimictext.ltr, textarea.ltr, .mimictextinput.ltr {
	direction: ltr;
}
input[readonly="readonly"]{
	border:1px solid #ecebe7;
	color: @textlight;
}

/*******for validation */
input.error, textarea.error, select.error {
	background-image: url(../images/ierrors.png);
	background-repeat:no-repeat;
	background-position: left top;
}
label.error, span.error, div.error {
	
	padding-left: 12px;
	background-image: url(../images/ierrors.png);
	background-repeat:no-repeat;
	background-position: left 30%;
}
.errornote {
	.redbox;
	padding-top: 14px;
	background-image: url(../images/ierrors.png);
	background-repeat:no-repeat;
	background-position: 2px 2px;
	margin-bottom: 20px;
}

/*********required fields */

[rel="required"]:after {
	content: " *";
	color: @red;
	font-weight: bold;
	vertical-align: 2px;
}
/*****fieldsets and legends general groups */
.indblock {
	/* specially used when radiobuttons, checkboxes or small icons are to be placed on first line of a group, and padd everything else to the right */
	padding-left: @gridGutterWidth;
	position: relative;
}
.indblock .indelem {
	position: absolute;
	left: 0;
}
.indblock .indelem[type="radio"],
.indblock .indelem[type="checkbox"] {
	margin-top: 2px;
}
.indblock.col {
	margin-right: 0;
}
/*** default fieldset and legends */
fieldset, legend {
	display: block;
}
fieldset {
	margin-bottom: 20px;
}
legend {
	font-weight: bold;
	padding-bottom: 10px;
}

/***** special shortcut for radiogroup, also used for checkbox groups on multiple columns */
.radiogroup label {
	padding: 2px;
	padding-left: 25px;
	position: relative;
	margin-left: -5px;
	margin-bottom: 1px;
	
}
.radiogroup input[type="radio"],
.radiogroup input[type="checkbox"] {
	position: absolute;
	left: 5px;
	margin-top: 2px;
}
.radiogroup label:hover{
	background-color: @hilite;
}
.radiogroup .selected {
	background-color: @selectedcolor;
}

/**** definition lists coupled with forms fieldset and legends */
.overview dt {
	display: block;
	color:@textlighter;
	xclear: both;
	padding-right: 5px;
}
.overview fieldset>div.stack,
.overview dd {
	display:block;
	padding-bottom: 5px;
}
.overview fieldset {
	display: block;
	position: relative;
	margin-bottom: 20px;
	.box-shadow(rgba(0,0,0,0.5) 0 0 4px);
	
}
/* for IE8 only 
@media \0screen {
  .overview fieldset {
	background-color: #fff;
	border:1px solid #f1eee6;
	
  }
  .overview fieldset.col {
	margin-right: 18px;
  }
}
/**/
.overview legend {
	display: block;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 20px;
}
.overview .errornote {
	
	.basicballoon;
	
	&:after {
		border-color: @red;
		#arrow > .below(4px); 
	}
}
.detailed fieldset {
	display: block;	
	position: relative;/* to hold all error messages appearing inside */
	margin-bottom: 20px;
	.clearfix();
}
.detailed dl {
	margin-bottom: 20px;
	.clearfix();
}
 
.detailed dt,
.detailed fieldset legend {
	float: left; 
	.columns(2);
	font-size: 1.2em;
	font-weight: normal;
	/* unusual decision to pad top to make coding easier */
	padding-top: 5px;
	margin-top: 10px;
	display: block;
	
}
.detailed .errornote {
	position: absolute!important;
	.columns(2, @extraSpace);
	right: 0;
	top: 20px;

	.basicballoon;
	margin-left: 6px;
	z-index: 10000;
	
	&:after {
		border-color: @red;
		#arrow > .left(4px); 
	}
}
.detailed dd,
.detailed fieldset>.stack,
.detailed>.stack {
	padding-left: (@gridColumnWidth  + @gridGutterWidth) * 2;
	border-top: 1px solid @grey;
	padding-top: 5px;
	margin-top: 5px;
}


/* STACKS: could be listings or div items, define how multiple field-name-value elements appear together */
.stack {
	margin-bottom: 20px;
}
.stack .stackitem,
ol.stacklist>li {
	margin-bottom: 10px;
	
}
.stack label,
ol.stacklist>li label,
.stack .label,
ol.stacklist>li .label {
	display: block;
	padding-bottom: 5px;
}
.stack .stackitem h6 {
	padding-bottom: 5px;
	color: @textlight;
}
.stack .hmark,
ol.stacklist .hmark {
	display: block;
	color: @textlight;
	font-size: 0.8em;
	padding: 5px 0;
	.border-radius(@radius);
	.transition(background-color .3s);
	
}
.stack .hmark:hover,
ol.stacklist .hmark:hover {
	background-color: @yellow;
}

/* per plugin */


/********************None Repetitive design elements ****************/
/********these styles are used once, not meatn to be reused, if ever reused, rewrite and move above *******/
/* .once_something { } */


/*********************Important****************************/
/* keep these last */
.loading {
	background-image: url(../images/iloading.gif)!important;
}
.forceinline {
	display: inline!important;
}
.forceblock {
	display: block!important;
}
.nobold {
	font-weight: normal!important;
}
.hidden {
	display: none;
}
/* developer notes */
.dev {
	font: 11px Tahoma!important;
	color: red!important;
	background-color: Yellow!important;
	display: inline!important;
}
.devgreygb .incols {
	margin-bottom: 20px;
}
.devgreygb .col {
	background-color: #eee;

}
